import React, {Component} from 'react'
import {
    Table,
    InputNumber,
    Button,
    message
} from 'antd'

import './style.less'

// 内表格数据
const innerDatas = [
    {
        key: 0,
        supplier: "可比克",
        deliveryDate: "2014-12-24",
        quantity: 30,
        quantum: 0,
    },
    {
        key: 1,
        supplier: "乐事",
        deliveryDate: "2014-12-24",
        quantity: 50,
        quantum: 0,
    },
    {
        key: 2,
        supplier: "上好佳",
        deliveryDate: "2014-12-24",
        quantity: 20,
        quantum: 0,
    },
    {
        key: 3,
        supplier: "农心",
        deliveryDate: "2014-12-24",
        quantity: 30,
        quantum: 0,
    },
]

// 外表格列表
const outterColumns = [
    {
        title: "提货单编号",
        dataIndex: "id",
        key: "id",
    },
    {
        title: "商品名称",
        dataIndex: "goodName",
        key: "goodName",
    },
    {
        title: "租户",
        dataIndex: "merchants",
        key: "merchants",
    },
    {
        title: "地域",
        dataIndex: "region",
        key: "region",
    },
    {
        title: "位置",
        dataIndex: "locality",
        key: "locality",
    },
    {
        title: "交货日期",
        dataIndex: "date",
        key: "date",
    },
    {
        title: "提货量",
        dataIndex: "pickQuantity",
        key: "pickQuantity",
    },
    {
        title: "分配量",
        dataIndex: "quantum",
        key: "quantum",
    }
]

class Distribution extends Component {
    
    // 初始化
    constructor(props) {
        super(props);
        this.state = {
            outterDatas: [
                {
                    key: 5,
                    id: "T06",
                    goodName: "薯条",
                    merchants: "蜜蜂便利店",
                    region: "中国",
                    locality: "杭州市文一西路",
                    date: "2017-06-20",
                    pickQuantity: 50,
                    quantum: 0,
                }
            ],
            innerDatas: innerDatas,
            quantum: 0,
        };

    }

    // 输入数据改变分配量，分配量取和
    onChangeValue(value, recode) {
        const {outterDatas, innerDatas} = this.state;
        let sumValue = 0

        recode.quantum = value
        
        // 求和
        innerDatas.map((item)=>{
            return sumValue += item.quantum
        })

        // 更新数据
        outterDatas.forEach((item) => {
          item.quantum = sumValue
        })
        
        // 更新状态
        this.setState({
          outterDatas: outterDatas,
          quantum: sumValue,
        })
    }

    // 点击比较分配量和提货量，决定是否可以按确定
    checkValue = () => {
        const {outterDatas} = this.state;
        if (outterDatas[0].pickQuantity < outterDatas[0].quantum) {
            message.error('分配量大于提货量，请重新输入')
        } else if (outterDatas[0].pickQuantity > outterDatas[0].quantum) {
            message.error('分配量小于提货量，请重新输入')
        } else {
            message.success('分配成功')
            this.props.close()
        }
    }
    close = () => {
        this.props.close()
    }

    // 展开方法
    expandedRowRender() {
        let innerColumns = [
            {title: "", dataIndex: "0", key: "null", width: "400px"},
            {title: "供应商", dataIndex: "supplier", key: "supplier"},
            {title: "交付日期", dataIndex: "deliveryDate", key: "deliveryDate"},
            {title: "剩余可提货量", dataIndex: "quantity", key: "quantity"},
            {
                title: "分配量",
                dataIndex: "quantum",
                key: "arrivalDate",
                render: (value, recode) => {
                    return (
                        <InputNumber
                            value = {recode.quantum}
                            defaultValue={0}
                            min={0}
                            max={recode.quantity}
                            onChange={(value) => this.onChangeValue(value, recode)}
                        />
                    )
                },
            }
        ]
        return (
            <Table className="innerTable" columns={innerColumns} dataSource={innerDatas} pagination={false}/>
        )
    }

    render() {
        const { outterDatas } = this.state;
        return (
            <div>
                <Table columns={outterColumns} dataSource={outterDatas} pagination={false}
                       expandable={{
                           expandedRowRender: record => this.expandedRowRender(),
                           defaultExpandAllRows: true,
                           expandIcon() {
                               return null
                           }
                       }}
                />
                <div className='button'>
                    <Button type="primary" onClick={this.checkValue}>确定</Button>
                    <Button onClick={this.close}>取消</Button>
                </div>
            </div>
        )
    }
}

export default Distribution
